import { Portal } from "magic-ui-react"
import { FC, useRef } from "react"
import { CSSTransition } from "react-transition-group"
import styles from './styles.module.less'
import Options from "./Options"
import UserInfo from "./UserInfo"
import './styles.less'

/**
 * 应用开始菜单
 * @param porps StartMenu
 * @returns 
 */
const StartMenu: FC<{
  visible: boolean,
  onClose: () => void
}> = (porps) => {
  const nodeRef = useRef(null)
  return (
    <CSSTransition
      in={porps.visible}
      timeout={{
        enter: 300,
        exit: 200
      }}
      nodeRef={nodeRef}
      classNames="alert"
      unmountOnExit
    >
      <Portal visible={true} container={document.body!} >
        <div
          className={styles.box}
          onClick={() => {
            porps.onClose()
          }}
        >
          <div
            className={styles.startMenu}
            ref={nodeRef}
            onClick={(e) => {
              e.stopPropagation()
            }}
          >
            <UserInfo />
            <div className="overflow-auto">
              <Options />
            </div>
          </div>
        </div>

      </Portal>
    </CSSTransition>
  )
}

export default StartMenu